<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 
	<head>
		<title></title>
	</head>
	<body>
		<div id="contentContainer" width="100%" height="100%" style="margin: 15px;">

			<Row>
				<i-col span="4">
					<Tree ref="tree" :data="treeData" v-on:on-toggle-expand="toggleExpand" v-on:on-select-change="selectChange" v-on:on-check-change="checkChange"></Tree>
				</i-col>
				<i-col span="20">

			<div th:replace="fragment/admin_content_query_form"></div>
			 
			<!-- 按钮 -->
		 	<div style="margin-bottom: 10px;margin-top: 20px;">
				<Button-group>
					<i-button type="ghost"  v-on:click="doAddButton()"><Icon type="ios-download-outline"></Icon> 新增</i-button>
					<i-button type="ghost"  v-on:click="doUpdateButton()"><Icon type="ios-download-outline"></Icon> 修改</i-button>
					<i-button type="ghost"  v-on:click="doDeleteButton()"><Icon type="ios-download-outline"></Icon> 删除</i-button>
				</Button-group>
			</div>

			<div th:replace="fragment/admin_content_table"></div>

			<!-- 新增 -->
			<Modal
				width="600"
				v-model="vueAddModalVisible"
				:styles="{top: '80px'}"
				title="增加部门">

				<i-form ref="vueAddForm" :model="vueAddForm" :rules="vueAddFormRules" :label-width="80">
					<Form-item prop="id" v-show="false">
						<i-input v-model="vueAddForm.id"></i-input>
					</Form-item>
					<Form-item label="部门编码" prop="code">
						<i-input v-model="vueAddForm.code" placeholder="请输入部门编码"></i-input>
					</Form-item>
					<Form-item label="部门名称" prop="name">
						<i-input v-model="vueAddForm.name" placeholder="请输入部门名称"></i-input>
					</Form-item>
					<Form-item label="部门描述" prop="descirption">
						<i-input v-model="vueAddForm.descirption" type="textarea" :rows="4" placeholder="请输入部门描述"></i-input>
					</Form-item>
					<Form-item label="排序" prop="sort">
						<Input-number :max="9999" :min="1" v-model="vueAddForm.sort" style="width: 100%"></Input-number>
					</Form-item>
					<Form-item label="所属机构" prop="organization_id">
					    <i-select v-if="organizationDataSelect.length > 0" v-model="vueAddForm.organization_id">
					        <i-option v-for="item in organizationDataSelect" :value="item.value" :key="item">{{ item.label }}</i-option>
					    </i-select>
					    <i-input v-else="true" value="暂无所属机构可选" disabled="disabled"></i-input>
					</Form-item>
					<Form-item label="上级部门" prop="parent_id">
					    <i-select v-if="parentDataSelect.length > 0" v-model="vueAddForm.parent_id">
					        <i-option v-for="item in parentDataSelect" :value="item.value" :key="item">{{ item.label }}</i-option>
					    </i-select>
					    <i-input v-else="true" value="暂无上级部门可选" disabled="disabled"></i-input>
					</Form-item>
					<Form-item label="可用状态" prop="available">
						<i-switch v-model="vueAddForm.available" size="large">
					        <span slot="open">启用</span>
					        <span slot="close">弃用</span>
					    </i-switch>
					</Form-item>
				</i-form>
				<!-- 自定义 modal 底部按钮 -->
				<div slot="footer">
			     	<i-button type="primary"  v-on:click="submitAddForm()">提交</i-button>
		            <i-button type="primary"  v-on:click="resetForm('vueAddForm');"  style="margin-left: 8px">重置</i-button>
		            <i-button type="primary"  v-on:click="vueAddModalVisible = false"  style="margin-left: 8px">取消</i-button>
		        </div>
			</Modal>

			<!-- 修改 -->
			<Modal
				width="600"
				v-model="vueUpdateModalVisible"
				:styles="{top: '50px'}"
				title="修改部门">

				<i-form ref="vueUpdateForm" :model="vueUpdateForm" :rules="vueUpdateFormRules" :label-width="80">
					<Form-item prop="id" v-show="false">
						<i-input v-model="vueUpdateForm.id"></i-input>
					</Form-item>
					<Form-item label="部门编码" prop="code">
						<i-input v-model="vueUpdateForm.code" placeholder="请输入部门编码"></i-input>
					</Form-item>
					<Form-item label="部门名称" prop="name">
						<i-input v-model="vueUpdateForm.name" placeholder="请输入部门名称"></i-input>
					</Form-item>
					<Form-item label="部门描述" prop="descirption">
						<i-input v-model="vueUpdateForm.descirption" type="textarea" :rows="4" placeholder="请输入部门描述"></i-input>
					</Form-item>
					<Form-item label="排序" prop="sort">
						<Input-number :max="9999" :min="1" v-model="vueUpdateForm.sort" style="width: 100%"></Input-number>
					</Form-item>
					<Form-item label="所属机构" prop="organization_id">
					    <i-select v-if="organizationDataSelect.length > 0" v-model="vueUpdateForm.organization_id">
					        <i-option v-for="item in organizationDataSelect" :value="item.value" :key="item">{{ item.label }}</i-option>
					    </i-select>
					    <i-input v-else="true" value="暂无所属机构可选" disabled="disabled"></i-input>
					</Form-item>
					<Form-item ref="updateFormParentSelection" label="上级部门" prop="parent_id">
						<i-select v-if="parentDataSelect.length > 0" v-model="vueUpdateForm.parent_id">
					        <i-option v-for="item in parentDataSelect" :value="item.value" :key="item">{{ item.label }}</i-option>
					    </i-select>
					    <i-input v-else="true" value="暂无上级部门可选" disabled="disabled"></i-input>
					</Form-item>
					<Form-item label="可用状态" prop="available">
						<i-switch v-model="vueUpdateForm.available" size="large">
					        <span slot="open">启用</span>
					        <span slot="close">弃用</span>
					    </i-switch>
					</Form-item>			    	
				</i-form>
				<!-- 自定义 modal 底部按钮 -->
				<div slot="footer">
			     	<i-button type="primary"  v-on:click="submitUpdateForm()">提交</i-button>
			     	<i-button type="primary"  v-on:click="resetForm('vueUpdateForm')"  style="margin-left: 8px">重置</i-button>
		            <i-button type="primary"  v-on:click="vueUpdateModalVisible = false"  style="margin-left: 8px">取消</i-button>
		        </div>
			</Modal>

			<div th:replace="fragment/admin_content_delete_modal"></div>
			
				</i-col>
			</Row>
			<Back-top />
		</div>
		<div th:replace="fragment/admin_content_scripts"></div>
		<script th:src="@{/static/js/utils/tree-utils.js}"></script>
		<script th:src="@{/static/js/business/department-biz.js}"></script>
	</body>
</html>
